<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品类别数统计图</title>
    <!--引入资源文件-->
    <script src="js/echarts5.2.2/echarts.js"></script>
    <script src="js/jquery3.5.1/jquery-3.5.1.min.js"></script>
</head>
<body>
<!--定义图表的DOM宽高-->
<div id="main" style="width: 600px;height: 400px;"></div>
</body>
<script>
    $(function () {
        $.ajax({
            url: "getBarVO",
            type: "post",
            success:function (data) {
                console.log("data",data)
                //初始化echarts实例
                // let myCharts=echarts.init($("#main"));
                let myCharts = echarts.init(document.getElementById("main"));

                //设置图表的配置项和数据
                let option = {
                    xAxis: {
                        type: 'category',
                        data: data.names,
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: data.values,
                            type: 'bar'
                        }
                    ]
                };
                //渲染图表
                myCharts.setOption(option);
            }
        });
    })



</script>
</html>